<template>
  <div>
    <a-form-model-item label="任务类型"
                       prop="taskType"
                       :rules="[{ required: true, message: '任务类型必填' }]">
      <a-radio-group v-model.trim="newValue.taskType" @change="taskTypeChange">
        <a-radio value="1">应用表单</a-radio>
        <a-radio value="2">连接器</a-radio>
      </a-radio-group>
    </a-form-model-item>
    <template v-if="newValue.taskType == '1'">
      <a-form-model-item label="应用分类" prop="applicationType"
                         :rules="[{ required: true, message: '应用分类必填' }]">
        <a-select v-model.trim="newValue.applicationType" @change="applicationTypeChange">
          <a-select-option v-for="(item) in appList" :value="item.code" :key="item.code">{{ item.appClassificationName }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="所属应用" prop="applicationId" :rules="[{ required: true, message: '所属应用必填' }]">
        <a-select v-model.trim="newValue.applicationId">
          <a-select-option v-for="(item) in classAppList" :value="item.id" :key="item.id">{{ item.name }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="表单选择"
                         prop="applicationMenuName"
                         :rules="[{ required: true, message: '表单选择必填' }]">
        <a-input @click="openModal" v-model.trim="newValue.applicationMenuName"></a-input>
      </a-form-model-item>
    </template>
    <template v-if="newValue.taskType == '2'">
      <a-form-model-item label="连接器选择"
                         prop="connectorId"
                         :rules="[{ required: true, message: '连接器选择必填' }]">
        <a-select v-model.trim="newValue.connectorId" @change="connectorIdChange">
          <a-select-option v-for="(item,index) in connectDataList"
                           :value="item.id"
                           :key="index">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="接口选择"
                         prop="connectorInterfaceId"
                         :rules="[{ required: true, message: '接口选择必填' }]">
        <a-select v-model.trim="newValue.connectorInterfaceId">
          <a-select-option v-for="(item,index) in apiDataList"
                           :value="item.id"
                           :key="index">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
    </template>

    <a-modal :visible.sync="visible"
             width="1000px"
             title="表单选择"
             @ok="ok"
             @cancel="cancel">
      <a-table :columns="columns"
               :rowKey="record => record.id"
               :data-source="dataList"
               :pagination="pagination"
               @change="setPagination"
               :row-selection="{
                 type:'radio',
                 selectedRowKeys: selectedRowKeys,
                 onChange: onSelectChange,
               }"
               :scroll="{y:'400px'}"
               bordered>
      </a-table>
    </a-modal>
  </div>
</template>

<script>
import _isEqual from 'lodash/isEqual'
import {
  connectorPage,
  connectorinterfacePage,
  getFormPage,
  appListStatForClass,
  getFromListByApplicationId
} from '../../../api/schedule'
export default {
  name: 'TaskType',
  props: {
    value: {
      type: Object,
      default: () => ({
        taskType: undefined
      })
    }
  },
  data() {
   return {
     selectedRowKeys: [],
     selectRows: {},
     connectDataList: [],
     apiDataList: [],
     visible: false,
     columns: [{
       title: '表单名称',
       dataIndex: 'name',
       key: 'name',
       align: 'left'
     }, {
       title: '表单编码',
       dataIndex: 'code',
       key: 'code',
       align: 'left'
     }, {
       title: '应用名称',
       dataIndex: 'applicationName',
       key: 'applicationName',
       align: 'left'
     }, {
       title: '使用机构',
       dataIndex: 'organs',
       key: 'organs',
       align: 'left'
     }, {
       title: '使用角色',
       dataIndex: 'roles',
       key: 'roles',
       align: 'left'
     }, {
       title: '发布时间',
       dataIndex: 'publishTime',
       key: 'publishTime',
       align: 'left'
     }, {
       title: '最新版本',
       key: 'maxVersion',
       dataIndex: 'maxVersion',
       scopedSlots: { customRender: 'maxVersion' },
       align: 'left'
     }],
     dataList: [],
     pagination: {
       current: 1,
       pageSize: 10,
       total: 0,
       showSizeChanger: true,
       pageSizeOptions: ['10', '20', '50', '100'],
       showTotal: total => `共 ${total} 条` // 显示总数
     },
    // forms: this.form,
    newValue: {
      taskType: '1',
      connectorInterfaceId: '',
      connectorId: '',
      applicationMenuVersionId: '',
      applicationId: '',
      applicationType: '',
      applicationMenuName: ''
    },
    appList: []
   }
  },
  watch: {
    newValue: {
      handler (v) {
        if (v) {
          this.$emit('input', v)
        }
      },
      deep: true,
      immediate: true
    },
    value: {
      handler (value, oldValue) {
        if (!_isEqual(value, oldValue)) {
          this.newValue = value
          if (!value.taskType) {
            this.newValue.taskType = '1'
          }
          this.selectRows = {
            id: value.applicationMenuVersionId,
            name: value.applicationMenuName
          }
          this.selectedRowKeys = [value.applicationMenuVersionId]
        }
      },
      deep: true,
      immediate: true
    },
    'newValue.connectorId': {
      immediate: true,
      deep: true,
      handler (n, old) {
        if (n != old && n) {
          this.getApiList()
        }
      }
    },
    'newValue.taskType': {
      handler (n, old) {
        if (n != old && n) {
          if (this.newValue.taskType == '2') {
            this.getConnectList()
          }
          if (this.newValue.taskType == '1') {
            this.getAppListStatForClass()
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {

  },
  computed: {
    classAppList() {
      let find = this.appList.find(it => it.code == this?.newValue?.applicationType)
      if (find) {
        return find.list
      }
      return []
    }
  },
  methods: {
    connectorIdChange() {
      // 清空值
      this.newValue = {
        ...this.newValue,
        connectorInterfaceId: ''
      }
    },
    applicationTypeChange () {
      // 清空值
      this.newValue = {
        ...this.newValue,
        applicationMenuVersionId: '',
        applicationMenuName: '',
        applicationId: ''
      }
    },
    getAppListStatForClass() {
      appListStatForClass('1').then(res => {
        this.appList = res
        // if (!this.newValue.applicationType) {
        //   this.newValue.applicationType = res[0].code
        // }
      })
    },
    // 选中项发生变化
    onSelectChange (selectedRowKeys, rows) {
      const [row] = rows
      this.selectedRowKeys = selectedRowKeys
      this.selectRows = row
    },
    setPagination (pagination) {
      this.pagination = pagination
      this.getList()
    },
    // 列表数据
    getList () {
      let param = {
        currPage: this.pagination.current,
        pageSize: this.pagination.pageSize
        // keyWord: this.params.keyWord
      }
      getFormPage(param).then(res => {
        if (res.totalCount > 0) {
          res.list.forEach(e => {
            let unit = [], role = []
            if (e.belongOrgan && e.belongOrgan.length > 0) {
              e.belongOrgan.map(val => {
                unit.push(val.organName)
              })
            }
            if (e.belongRole && e.belongRole.length > 0) {
              e.belongRole.map(val => {
                role.push(val.roleName)
              })
            }
            e.unitName = unit.length > 0 ? unit.join(',') : ''
            e.roleName = role.length > 0 ? role.join(',') : ''
          })
        }
        this.dataList = res.list || []
        this.pagination.current = res.currPage
        this.pagination.total = res.totalCount
        this.pagination.pageSize = res.pageSize
      })
    },
    openModal() {
      this.visible = true
      this.getList()
    },
    cancel() {
      this.visible = false
    },
    ok() {
      this.newValue = {
        ...this.newValue,
        applicationMenuVersionId: this.selectRows.id,
        applicationMenuName: this.selectRows.name
      }
      this.cancel()
    },

    taskTypeChange () {
      if (this.newValue.taskType == '2') {
        this.getConnectList()
      }
      if (this.newValue.taskType == '1') {
        this.getAppListStatForClass()
      }
      // 清空值
      this.newValue = {
        ...this.newValue,
        connectorInterfaceId: '',
        connectorId: '',
        applicationMenuVersionId: '',
        applicationId: '',
        applicationType: '',
        applicationMenuName: ''
      }
    },
    getConnectList () {
      let param = {
        keyWord: '',
        page: {
          current: 1,
          size: 10000
        }
      }
      connectorPage(param).then(res => {
        this.connectDataList = res.records || []
      })
    },
    getApiList () {
      let param = {
        keyWord: '',
        connectorId: this.newValue.connectorId,
        page: {
          current: 1,
          size: 10000
        }
      }
      connectorinterfacePage(param).then(res => {
        this.apiDataList = res.records || []
      })
    }
  }
}
</script>

<style scoped>

</style>
